<template>
  <div class="top_4_box">
    <div class="top_4_top">
      <h4>商品情况</h4>
    </div>
    <ul class="top_4_list">
      <li>
        <div>
          <p>待审核商品:</p>
          <p class="top_4_list_num">0</p>
        </div>
      </li>
      <li>
        <div>
          <p>库存警告商品:</p>
          <p class="top_4_list_num">0</p>
        </div>
      </li>
      <li>
        <div>
          <p>上架商品:</p>
          <p class="top_4_list_num">0</p>
        </div>
      </li>
      <li>
        <div>
          <p>下架商品:</p>
          <p class="top_4_list_num">0</p>
        </div>
      </li>
      <li check="1">
        <div>
          <p>商品评论:</p>
          <p class="top_4_list_num">0</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>
<style lang="scss" scoped>
.top_4_box {
    height: 223px;
    width: 32%;
    border-radius: 5px;
    border: 1px solid rgba(217, 217, 217, 100);

    .top_4_top {
      width: 100%;
      height: 37px;
      line-height: 37px;
      border-radius: 5px 5px 0px 0px;
      background-color: rgba(246, 246, 247, 100);
      color: rgba(16, 16, 16, 100);
      font-size: 14px;
      font-family: Roboto;
      border-bottom: 1px solid rgba(217, 217, 217, 100);

      h4 {
        width: 95%;
        margin: 0 auto;
      }
    }

    .top_4_list {
      height: 37px;
      line-height: 37px;
      border-radius: 5px 5px 0px 0px;
      background-color: rgba(255, 255, 255, 100);
      color: rgba(16, 16, 16, 100);
      font-size: 14px;
      font-family: Roboto;

      li[check="1"] {
        border-bottom: none;
      }

      li {
        border-bottom: 1px solid rgba(217, 217, 217, 100);

        div {
          display: flex;
          justify-content: space-between;
          width: 95%;
          margin: 0 auto;

          .top_4_list_num {
            color: rgba(85, 202, 125, 100);
          }
        }
      }
    }
  }
</style>